<template>
  <div>
    <img
      :class="[isLoading ? hiddenStyle : ' ']"
      :src="picUrl"
      style="max-height: 250px"
      alt="image"
      v-on:load="onImageLoaded"
    />

    <div :class="['img-item', isLoading ? ' ' : hiddenStyle]">
      <a-icon type="loading"></a-icon>
    </div>
  </div>
</template>
<script>
export default {
  name: "PreLoadingImg",
  props: {
    picUrl: String,
  },
  data() {
    return {
      isLoading: true,
      hiddenStyle: "hidden-style",
    };
  },
  methods: {
    onImageLoaded: function () {
      // console.log("image loaded", event);
      this.isLoading = false;
    },
  },
};
</script>

<style>
.hidden-style {
  visibility: hidden;
}
.loading-container {
  position: relative;
}
.img-item {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* .loading-icon{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;   
} */
</style>